/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-02-15 08:41:52
 * @LastEditTime : 2023-06-25 16:03:49
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Common\Command\Options.jsx
 * @Description  :
 */
import { useState } from 'react'

import { WebTemplateUrl } from '../Template/configuration'

export const Options = ({ OptionsEvent, OptionsClickEvent }) => {
    const [TypeState] = useState([
        [
            // { uuid: '1', title: '语音通话', icon: 'co001.png', sort: 'makeAudioCall' },
            { uuid: '2', title: '视频通话', icon: 'co002.png', sort: 'makeVideoCall' },
            // { uuid: '3', title: '消息发送', icon: 'co003.png' },
            // { uuid: '4', title: '创建广播', icon: 'co004.png' },
        ],
        [
            { uuid: '1', title: '连接麦克风', icon: 'co001.png', sort: 'getMicrophone' },
            { uuid: '2', title: 'IP广播', icon: 'co004.png', sort: 'radioBroadcast' },
            { uuid: '3', title: '视频对讲', icon: 'co002.png', sort: 'videoBroadcast' },
            { uuid: '4', title: '终止广播', icon: 'co004.png', sort: 'offRadioBroadcast' },
        ],
        [{ uuid: '1', title: '现场画面', icon: 'co006.png', sort: 'MonitorVideo' }],
    ])

    const [OptionsType, setOptionsType] = useState(0)

    OptionsEvent.useSubscription(val => {
        if (val) setOptionsType(val.type)
        else setOptionsType(null)
    })

    return (
        <>
            {OptionsType && (
                <div className="Options">
                    <div>
                        {TypeState[OptionsType - 1] &&
                            TypeState[OptionsType - 1].map(({ uuid, title, icon, sort }) => (
                                <div
                                    key={uuid}
                                    onClick={() => OptionsClickEvent.emit({ state: OptionsType, click: sort })}
                                >
                                    <img src={WebTemplateUrl + icon} alt="" />
                                    <div>{title}</div>
                                </div>
                            ))}
                    </div>
                </div>
            )}
        </>
    )
}
